.layer {
    @pickerPrefixCls: rmc-picker;
    @itemHeight: 35px;
    @conHeight: @itemHeight * 5;
    @deepColor: rgba(221,221,221,1);
    @shallowColor: rgba(221,221,221,0);
    color: RGBA(51, 51, 51, 1);
    font-size: 16px;
    .header {
        height: 40px;
        width: 100%;
        border-top: 1px solid #ddd;
        background-color: RGBA(238, 238, 238, 1);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .cancel, .confirm {
            width: 50px;
            height: 25px;
            border-radius: 2px;
            font-size: 12px;
            border: 1px solid RGBA(220, 220, 220, 1);
            color: RGBA(119, 119, 119, 1);
            background: #fff;
            margin: 0 12px;
        }
        .confirm {
            color: #fff;
            background-color: RGBA(22, 154, 218, 1);
            border: 1px solid RGBA(22, 154, 218, 1);
        }
        .title {

        }
    }
    .unitBanner {
        width: 100%;
        height: 35px;
        background-color: RGBA(240, 240, 240, 1);
        font-size: 14px;
        border-bottom: 1px solid RGBA(205, 205, 205, 1);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .pk {
        display: flex;
        flex-direction: row;
        position: relative;
        background-color: RGBA(221, 221, 221, 1);
        .picker {
            &.middle {
                flex: .3;
            }
        }
        .shi {
            &:before {
                content: '时';
                width: 30%;
                height: @itemHeight - 2;
                position: absolute;
                top: 0;
                right: 16px;
                text-align: center;
                line-height: @itemHeight - 2;
                font-size: 16px;
            }
        }
        :global {
            [class~="@{pickerPrefixCls}"] {
                flex: 1;
                position: relative;
                height: @conHeight;
                overflow: hidden;
            }
            [class~="@{pickerPrefixCls}-disabled"] {
                opacity: 0.4;
            }
            [class~="@{pickerPrefixCls}-content"] {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                z-index: 1;
            }
            
            [class~="@{pickerPrefixCls}-mask"] {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                margin: 0 auto;
                width: 100%;
                z-index: 3;
                background-image: linear-gradient(to bottom, @deepColor, @shallowColor),
                linear-gradient(to top, @deepColor, @shallowColor);
                background-position: top, bottom;
                background-repeat: no-repeat;
            }
            
            [class~="@{pickerPrefixCls}-item"] {
                touch-action: manipulation;
                text-align: center;
                font-size: 16px;
                height: @itemHeight;
                line-height: @itemHeight;
                color: #000;
                white-space: nowrap;
                text-overflow: ellipsis;
                direction: rtl;
            }
            
            [class~="@{pickerPrefixCls}-indicator"] {
                width: 100%;
                height: @itemHeight - 2;
                position: absolute;
                left: 0;
                z-index: 3;
                border-top: 1px solid #999;
                border-bottom: 1px solid #999;
                background-position: top, bottom;
                background-size: 100% 1px;
                background-repeat: no-repeat;
            }
        }
    }
}